<template>
	<view>
		<img style="width: 100%;" src="https://www.dadi-cpa.com/r/cms/www/default/images/gywm.png" alt="" />
		<uni-section title="管理团队" type="line">
			<swiper class="swiper" :indicator-dots="true">
				<swiper-item>
					<uni-grid :column="2" :highlight="true" @change="change" :showBorder='false'>
						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<image style="width: 80%;height: 200px;" :src="item.src" class="image"
									mode="aspectFill" />
								<text class="text">{{ item.name }}({{ item.tit }}/{{ item.tits }})</text>
								<text class="text"></text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>
				<swiper-item>
					<uni-grid :column="2" :highlight="true" @change="change" :showBorder='false'>
						<uni-grid-item v-for="(item, index) in list2" :index="index" :key="index">
							<view class="grid-item-box">
								<image :src="item.src" class="image" mode="aspectFill"
									style="width: 80%; height: 200px;" />
								<text class="text">{{ item.name }}({{ item.tit }}/{{ item.tits }})</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>
				<swiper-item>
					<uni-grid :column="2" :highlight="true" @change="change" :showBorder='false'>
						<uni-grid-item v-for="(item, index) in list3" :index="index" :key="index">
							<view class="grid-item-box">
								<image :src="item.src" class="image" mode="aspectFill"
									style="width: 80%;height: 200px;" />
								<text class="text">{{ item.name }}({{ item.tit }}/{{ item.tits }})</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>
			</swiper>
		</uni-section>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						src: 'https://www.dadi-cpa.com/u/cms/www/202501/202002092fhr.png',
						name: '于洋',
						tit: '董事',
						tits: '合伙人',
					},
					{
						// src: 'https://www.dadi-cpa.com/u/cms/www/202501/2020013810i9.png,
						src: 'https://www.dadi-cpa.com/u/cms/www/202501/2020013810i9.png',
						name: '王丽君',
						tit: '董事',
						tits: '合伙人',
					},

				],
				list2: [{
						src: 'https://www.dadi-cpa.com/u/cms/www/202407/0209465552g5.jpg',
						name: '史洪波',
						tit: '董事',
						tits: '合伙人',
					},
					{
						src: 'https://www.dadi-cpa.com/u/cms/www/202501/202002092fhr.png',
						name: '孙云霞',
						tit: '董事',
						tits: '合伙人',
					},

				],
				list3: [{
						src: 'https://www.dadi-cpa.com/u/cms/www/202407/02095419jr0e.jpg',
						name: '李玉凤',
						tit: '董事',
						// tits:'合伙',
						tits: '合伙人',
					},
					{
						src: 'https://www.dadi-cpa.com/u/cms/www/202501/202002092fhr.png',
						name: '孙云霞',
						tit: '董事',
						tits: '合伙人',
					}
				],

			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},


		}
	}
</script>


<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 35px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		margin-bottom: 15px;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 380px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>